// 组装分页图片数据
export async function setPageImgArr(skins, opts = {}) {
  // 定义一个整体图片的数组
  let imgPageArr = [];
  let commonIndex = 0; //定义一个全局的皮肤数
  let imgNUm = 0; //图片页数  数量
  let typeArrNum = -1; //每页图的分组得下标
  let basicHieght = opts.basicHieght || 3000; //每页图片的基准高度，不能超过这个高度
  let typeNameHwight = opts.typeNameHwight || 75; //皮肤类型名称高度
  let skinLineHeight = opts.skinLineHeight || 170; //皮肤每行的高度
  let skinLineNum = opts.skinLineNum || 7; //皮肤每行的数量
  let headHeight = opts.headHeight || 170; //头部高度
  let gameId = opts.gameId || ''; //游戏ID  方便定制某些游戏
  let pageHeight = headHeight; //每页图片的高度，算出来的,新的一页先有一个头部的高度

  // 双重循环 遍历所有皮肤
  for (let i = 0; i < skins.length; i++) {
    // 遍历不同类型的皮肤
    const typeMap = skins[i];

    if (typeMap.list.length > 0) {
      
      if(gameId&&(gameId==10||gameId==12||gameId==6)){
        // 火影 CF按属性默认顺序

      }else{
        // 分类内部 按颜色排序
      // 按皮肤颜色排序
        typeMap.list.sort((a, b) => {return (b.kz1||0) - (a.kz1||0)});
      }
      
      for (let j = 0; j < typeMap.list.length; j++) {
        // 遍历到皮肤
        let skin = typeMap.list[j];
        // 本次遍历不绘制  只将每张图片的内容区分开
        if (commonIndex === 0) {
          // 第一个皮肤，新开一页
          typeArrNum = -1;
          imgPageArr = [[]];
        }
        // 达到分页条件
        if (pageHeight >= basicHieght) {
          console.log('达到分页条件')
          imgNUm++;
          pageHeight = headHeight;
          imgPageArr.push([]);
          if(j == 0){
            typeArrNum = -1
          }else{
            typeArrNum = 0;
            imgPageArr[imgNUm][typeArrNum] = {
              typeName: typeMap.name,
              skins: [],
            };
          }
        }
        // 达到分组条件
        if (j == 0 ) {
          console.log('达到分组条件')
          // 分组，加一行高度
          pageHeight += skinLineHeight+typeNameHwight;
          // 达到分页条件
          if (pageHeight >= basicHieght) {
            imgNUm++;
            typeArrNum =-1;
            pageHeight = headHeight;
            imgPageArr.push([]);
          }
          // 分组开始  创建分组数组
          typeArrNum++;
          imgPageArr[imgNUm][typeArrNum] = {
            typeName: typeMap.name,
            skins: [],
          };
          
        }

        imgPageArr[imgNUm][typeArrNum].skins.push(skin);
        // 达到换行条件
        let length = imgPageArr[imgNUm][typeArrNum].skins.length;
        if (length > 0 && length % skinLineNum == 0) {
          // 总高度增加一行皮肤
          pageHeight += skinLineHeight;
        }
        commonIndex++;
      }
    }
  }
  // 返回
  return {
    opts: {
      headHeight,
      typeNameHwight,
    },
    imgPageArr,
  };
}

// 绘制有最大宽度的文字行，单行超出显示省略号
export function drawTextWithEllipsis(ctx, text, x, y, maxWidth = 200) {
  const ellipsis = '...';
  const ellipsisWidth = ctx.measureText(ellipsis).width;
  const textWidth = ctx.measureText(text).width;
  
  if (textWidth <= maxWidth) {
      ctx.fillText(text, x, y);
      return;
  }
  
  let left = 0;
  let right = text.length;
  
  while (left <= right) {
      const mid = Math.floor((left + right) / 2);
      const testText = text.substring(0, mid);
      const testWidth = ctx.measureText(testText).width;
      
      if (testWidth + ellipsisWidth <= maxWidth) {
          left = mid + 1;
      } else {
          right = mid - 1;
      }
  }
  const finalText = text.substring(0, right) + ellipsis;
    ctx.fillText(finalText, x, y);
}